<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';

import { reqAccountDetail } from '#/api/exchange-center';
import { useOrderStore } from '#/store/order';

const props = defineProps(['platformList', 'platform', 'rowData']);
// console.log('props', props);
// const rowDetails = ref(cloneDeep(props.rowData));
// const formData = reactive({
//   id: 0,
//   ip: '',
//   remark: '',
//   groups: '',
//   platforms: '',
//   account: '',
//   status: false,
//   connect: false,
//   default: false,
//   updated_at: '',
// });

const formData = ref({
  id: 0,
  ip: '',
  remark: '',
  groups: '',
  group_id: '',
  platform: '',
  platforms: '',
  account: '',
  status: false,
  connect: false,
  default: false,
  updated_at: '',
});

// // console.log('rowDetails', rowDetails);
const rowID = ref(props.rowData.id);
// const rowDetails = ref({ id: 0 });
const getRowData = async (id: string) => {
  // console.log('id', id);
  const result = await reqAccountDetail(id);
  // loading.value = false;
  // const formValue = {
  //   ...result,
  //   group_id: result.group_id[0],
  //   platform_id: result.platform_id[0],
  // };
  // dataForm.value = formValue;
  // console.log('result', result);
  formData.value = result;
};
watch(
  () => props.rowData.id,
  () => {
    // console.log('1111');
    rowID.value = props.rowData.id;
    getRowData(rowID.value);
  },
  { deep: true },
);

getRowData(rowID.value);
onMounted(() => {});

const orderStore = useOrderStore();
const { groups } = orderStore;
const dataFormRef = ref();
const dataForm = ref<any>({
  platform: {},
  passphrase: '',
});
// watch(
//   () => props.platform,
//   () => {
//     dataForm.value.platform = {
//       id: props.platformList.id,
//       name: props.platformList.name,
//     };
//   },
//   { deep: true },
// );

const isOkxSwap = computed(() => {
  return props.platformList.name === 'OkxSwap';
});

const dataRules = ref({
  ip: [
    { required: true, message: '请输入', trigger: 'blur' },
    { max: 256, message: '长度必须小于256位', trigger: 'blur' },
  ],
  group_id: [{ required: true, message: '请输入', trigger: 'blur' }],
  account: [
    { required: true, message: '请输入', trigger: 'blur' },
    { max: 256, message: '长度必须小于256位', trigger: 'blur' },
  ],
  api_key: [{ required: true, message: '请输入', trigger: 'blur' }],
  passphrase: [{ required: true, message: '请输入', trigger: 'blur' }],
  api_secret: [{ required: true, message: '请输入', trigger: 'blur' }],
  platform_id: [{ required: true, message: '请输入', trigger: 'blur' }],
});
</script>

<template>
  <div>
    <el-form
      ref="dataFormRef"
      class="form"
      :model="dataForm"
      :rules="dataRules"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="挂靠IP" prop="ip">
        <el-input v-model="formData.ip" maxlength="50" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="组别" prop="group_id">
        <el-select
          v-model="formData.group_id"
          placeholder="请选择组别"
          value-key="id"
          size="large"
          style="width: 240px"
        >
          <el-option
            v-for="item in groups"
            :key="item.id"
            :label="item.name"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="平台" prop="platform">
        <el-input v-model="formData.platform_id.name" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="uid" prop="account">
        <el-input v-model="dataForm.account" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="key" prop="api_key">
        <el-input v-model="dataForm.api_key" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="Secret" prop="api_secret">
        <el-input v-model="dataForm.api_secret" placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="passphrase"
        :prop="isOkxSwap ? 'passphrase' : ''"
        v-if="isOkxSwap"
      >
        <el-input v-model="dataForm.passphrase" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="状态">
        <el-switch
          v-model="dataForm.status"
          :active-value="1"
          :inactive-value="0"
          active-text="启用"
          inactive-text="停用"
        />
      </el-form-item>
      <el-form-item label="账号备注" prop="remark">
        <el-input
          v-model="dataForm.remark"
          maxlength="16"
          placeholder="请输入"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped></style>
